<!--添加用户表单-->
<div class="tab_edit">
    <form action="{:Url('credit_add_submit')}" method="post" id="credit_add_submit">
        <table width="100%" class="list">
            <tr>
                <td class="t_r t_left_w">选择银行：</td>
                <td class="t_l">{:widget('common/Select/select',array('bank_id',array($bank_list,"bank_id","bank_name"),null,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">信用卡名称：</td>
                <td class="t_l">{:widget("common/Input/input",array("credit_product_name",null,true,false,"width:85%;"))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">信用卡图片：</td>
                <td class="t_l">{:widget('common/Images/wos',array('credit_product_url','credit',null,false,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">信用卡概要：</td>
                <td class="t_l">{:widget('common/TextArea/text_area',array('credit_product_outline',null,true,false,"width:85%;"))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">年费：</td>
                <td class="t_l">{:widget('common/Radio/radio',array('credit_fee','credit_fee',null,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">信用卡等级：</td>
                <td class="t_l">{:widget('common/Radio/radio',array('credit_level','credit_level',null,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">信用卡币种：</td>
                <td class="t_l">{:widget('common/CheckBox/checkbox',array('credit_currency','credit_currency',null,null,null,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">发卡组织：</td>
                <td class="t_l">{:widget('common/Radio/radio',array('credit_agency','credit_agency',null,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">特权：</td>
                <td class="t_l">{:widget('common/Radio/radio',array('credit_privilege','credit_privilege',null,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">信用卡用途：</td>
                <td class="t_l">{:widget('common/Radio/radio',array('credit_purpose','credit_purpose',null,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">卡面颜色：</td>
                <td class="t_l">{:widget('common/Radio/radio',array('credit_color','credit_color',null,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">卡面类型：</td>
                <td class="t_l">{:widget('common/Radio/radio',array('credit_type','credit_type',null,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">标签：</td>
                <td class="t_l">
                    <div class="add_label">
                        <input type="hidden" name="add_list"/>
                        <div class="add_label_box">

                        </div>

                        <label id="add_btn">添加标签</label>

                        <label id="add_input">
                            <input name="user_label" type="text"/>
                            <a onclick="seve_label()">保存</a>
                        </label>
                        <font color="red">备注：标签最多只能6个，每个标签字数在4到7个之间</font>
                    </div>

                </td>

            </tr>
            <tr>
                <td class="t_r t_left_w">有效区域：</td>
                <td class="t_l">
                    <div class="lists-tab-cont" style="width: 810px;border: 1px solid #ddd;">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <thead>
                                <tr>
                                    <th width="70%" class="tabSort-header">有效区域省份/城市<font color="red">（默认：不填表示全国有效！)</font></th>
                                    <th width="30%" class="tabSort-header">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="area_extend">
                                    <td>{:widget('common/Select/select_group',array('credit_area',array($area_list,"area_id","acronym","parent_id"),0))}</td>
                                    <td><a id="area_add" href="javascript:void(0);" class="blue"><b>添加</b></a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="t_r t_left_w">详细内容：</td>
                <td class="t_l">{:widget('common/TextArea/text_area',array('credit_content_txt',null,false,false,"width:800px;"))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">详细图片：</td>
                <td class="t_l">{:widget('common/Images/wos',array('credit_content_img','credit',null,true,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">排序：</td>
                <td class="t_l">{:widget("common/Input/input",array("order_by",0,false,false))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">备注：</td>
                <td class="t_l">
                    {:widget('common/TextArea/text_area',array('remark',null,false,false,"width:85%"))}
                </td>
            </tr>
            <tr>
                <td class="t_r t_left_w"></td>
                <td class="t_l">
                    <div class="btn"><input type="submit" class="but_blue" value="保存信息"></div>
                </td>
            </tr>
        </table>
    </form>
</div>
<style>
    .add_label{
    }
    .add_label .add_label_box{
        display: inline-block;
    }
    .add_label span{
        margin: 10px 0;
        display: inline-block;
        height: 26px;
        padding: 0 30px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #ccc;
        margin-right: 10px;
        position: relative;
        cursor: pointer;
    }
    .add_label span::after{
        content: '×';
        display: block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #ff0000;
        position: absolute;
        right: 2px;
        top: 2px;
    }
    .add_label label{
        display: inline-block;
        height: 26px;
        padding: 0 30px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #ccc;
        margin-right: 10px;
    }
    .add_label label#add_btn{
        border-color: #3b77e3;
        color: #3b77e3;
        cursor: pointer;
    }
    .add_label label#add_input{
        padding: 0;
        border-color: #3b77e3;
        color: #999;
        display: none;
    }
    .add_label label#add_input a{
        display: inline-block;
        background: none;
        border: none;
        background-color: #3b77e3;
        width: 50px;
        text-align: center;
        height: 26px;
        line-height: 26px;
        color: #fff;
        cursor: pointer;
    }
    .add_label label#add_input input{
        height: 22px;
        line-height: 22px;
        position: relative;
        top: -2px;
    }
</style>

<!-- JS处理 -->
<script language="javascript">

    //添加
    $('#add_btn').click(function(){

        //隐藏按钮显示输入框
        $(this).hide().siblings('#add_input').css("display","inline-block");
        //自动聚焦
        $('#add_input input').focus();

    });

    //删除
    function det_label(thas,id){
        //询问框
        layer.confirm('确认删除该标签？', {
            btn: ['确定','取消'] //按钮
        }, function(){

            //取得当前点击的索引
            var index = $(thas).index();

            if(id!=undefined){
                $("input[name=det_list]").val(id+','+$("input[name=det_list]").val());
            }else{
                var add_val = $("input[name=add_list]").val();
                $("input[name=add_list]").val('');
                var add_list = add_val.split(",");
                for(var i in add_list){
                    if(add_list[i]!=$(".add_label_box span").eq(index).html()&&add_list[i]!=""){
                        $("input[name=add_list]").val(add_list[i]+','+$("input[name=add_list]").val());
                    }
                }
            }

            var dom = $(".add_label_box span");
            $(".add_label_box span").eq(index).remove();

            layer.msg('删除成功', {icon: 1});
        }, function(){

        });


    }

    //保存
    function seve_label(){

        var dom = $(".add_label_box");
        var v = $('input[name=user_label]').val();

        if (v == ''){

            alert('标签不能为空')
            return;
        }else if (v.length<4||v.length>7){
            alert('标签在4到7个字之间')
            return
        }else if ($('.add_label_box span').length>=6){
            alert('标签最多只能6个')
            return
        }
        $('input[name=user_label]').val('');
        dom.append("<span onclick='det_label(this)'>"+v+"</span>");

        $("input[name=add_list]").val(v+','+$("input[name=add_list]").val());

        //隐藏按钮显示输入框
        $('#add_input').css("display","none");
        $('#add_btn').show();

    }
    $(function(){

        //有效区域
        var area_tpl = {
            getTemplate : function(info){
                return  '<tr class="info"><td><input type="hidden" name="area[]" value="' + info.data + '">' + info.content + '</td><td><a class="del" href="javascript:void(0);" class="blue"><b>删除</b></a></td></tr>';
            }
        };

        //添加关联有效区域
        $("a#area_add").click(function(){
            //初期化变量
            var area = $("select[cache='credit_area'] option:selected");
            var province_id = parseInt(area.eq(0).val());
            var province_name = area.eq(0).text();
            var city_id = parseInt(area.eq(1).val());
            var city_name = area.eq(1).text();

            //判断是否数据是否存在
            if(province_id > 0 && city_id > 0) {
                //添加到列表中
                $("tr#area_extend").after(area_tpl.getTemplate({
                    data: province_id + "," + city_id,
                    content: province_name + "、" + city_name
                }));
            }else{
                alert("请选择有效区域的省份及城市！");
            }
        });

        //删除关联有效区域
        $("a.del").live("click",function(){
            //删除多余数据
            $(this).parents("tr.info").remove();
        });
    });
</script>
